<template>
    <div class="step_four">
        <div id="employee_ids" class="title">引流员工</div>
        <el-form label-width="auto" class="form">
            <el-form-item label="引流员工" required>
                <div class="form-staffs">
                    <div class="staffs">
                        <el-tag
                            v-for="item in employeeIds"
                            :key="item.name"
                            class="staffs_item"
                            :type="item.id"
                            @close="handleClose(item)">
                            {{ item.name }}
                        </el-tag>
                    </div>
                </div>
                <el-button class="select-staffs" @click="openDepart">选择成员</el-button>
            </el-form-item>
            <div class="divider"></div>
            <div class="title">欢迎语</div>
            <el-form-item id="welcome_info" label="参与欢迎语">
                <el-switch v-model="form.part_welcome_switch" :active-value="1" :inactive-value="2" />
                <div v-show="form.part_welcome_switch == 1">
                    <Welcome ref="Welcome1Ref" :content="form.welcome_info.welcome_text" dom-id="welcome1" />
                </div>
            </el-form-item>
            <el-form-item id="assist_success_welcome" label="助力成功欢迎语">
                <el-switch v-model="form.assist_success_welcome_switch" :active-value="1" :inactive-value="2" />
                <div v-show="form.assist_success_welcome_switch == 1">
                    <Welcome ref="Welcome2Ref" :content="form.assist_success_welcome.welcome_text" dom-id="welcome2" />
                </div>
            </el-form-item>
            <el-form-item id="assist_fail_welcome" label="助力失败欢迎语">
                <el-switch v-model="form.assist_fail_welcome_switch" :active-value="1" :inactive-value="2" />
                <div v-show="form.assist_fail_welcome_switch == 1">
                    <Welcome ref="Welcome3Ref" :content="form.assist_fail_welcome.welcome_text" dom-id="welcome3" />
                </div>
            </el-form-item>
            <div class="divider"></div>
            <div class="title">活动链接</div>
            <el-form-item id="link_img" label="图文封面" required>
                <UploadImg
                    :rule="{
                        type: 'jpg|JPG|jpeg|JPEG|png|PNG',
                        unit: 'MB',
                        size: 2
                    }"
                    :url="form.link_img"
                    @submit="v => (form.link_img = v)" />
                <div class="upload_desc">
                    图片支持JPG、PNG、JPEG格式，大小2M以内，建议宽高比为1：1，尺寸200px*200px。
                </div>
            </el-form-item>
            <el-form-item id="link_title" class="link_title" label="图文标题" required>
                <el-input
                    v-model="form.link_title"
                    style="width: 400px"
                    placeholder="请输入图文标题"
                    maxlength="15"
                    show-word-limit
                    :clearable="true"
                    class="input_icon" />
            </el-form-item>
            <el-form-item label="图文描述" prop="link_desc">
                <el-input
                    v-model="form.link_desc"
                    style="width: 400px"
                    show-word-limit
                    :rows="4"
                    maxlength="15"
                    type="textarea"
                    placeholder="请输入图文描述"
                    class="content_input" />
            </el-form-item>
            <div class="divider"></div>
            <Posters ref="PostersRef" :reward-info="rewardInfo" />
        </el-form>
    </div>
    <ZWDepart ref="DepartRef" :type="1" @submit="getDepart" />
</template>

<script setup lang="ts">
import Posters from './Posters.vue';
import UploadImg from '@/view/smartMarketing/components/UploadImg.vue';
import Welcome from './Welcome.vue';
import ZWDepart from '@/components/ZWDepart.vue';
import { getSetionId } from '@/utils/utils';

import { reactive, ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
const form = reactive({
    employee_ids: [],
    part_welcome_switch: 1,
    welcome_info: {
        welcome_text: `##客户昵称##，欢迎加入xxx抽奖活动哟～仅需完成以下三步即可领取奖品哦
    参与流程：
    ① 点击下方活动链接保存专属海报
    ② 将专属海报分享给x位好友哦
    ③ 好友长按扫描海报的二维码进入助力页面，加好友助力后才算助力成功哟～

    注意事项：请勿直接转发活动链接给好友，是无法成功记录数据的哦～`,
        media_content: [],
        welcome_friend_attachment_ids: [],
        local_link: [],
        local_content: []
    },
    assist_success_welcome_switch: 1,
    assist_success_welcome: {
        welcome_text: `##客户昵称##，您已经为好友助力成功！诚邀您一起参与本次福利活动~
  ① 点击下方活动链接保存专属海报
  ② 将专属海报分享给x位好友哦
  ③ 好友长按扫描海报的二维码进入助力页面，加好友助力后才算助力成功哟～
  
  注意事项：请勿直接转发活动链接给好友，是无法成功记录数据的哦～`,
        media_content: [],
        welcome_friend_attachment_ids: [],
        local_link: [],
        local_content: []
    },
    assist_fail_welcome_switch: 1,
    assist_fail_welcome: {
        welcome_text: `##客户昵称##，很抱歉，您不满足助力条件，无法助力！诚邀您一起参与本次福利活动~~
  ① 点击下方活动链接保存专属海报
  ② 将专属海报分享给x位好友哦
  ③ 好友长按扫描海报的二维码进入助力页面，加好友助力后才算助力成功哟～
  
  注意事项：请勿直接转发活动链接给好友，是无法成功记录数据的哦～`,
        media_content: [],
        local_link: [],
        welcome_friend_attachment_ids: [],
        local_content: []
    },
    link_img: 'https://static.scrm.keyid.cn/assets/images/lottery/link.pic',
    link_title: '幸运大抽奖',
    link_desc: '帮我助力你可以领取奖品哦！'
});

// 选择引流员工
const DepartRef = ref<any>(null);
const employeeIds = ref([]);
const openDepart = () => {
    DepartRef.value.isQRAuth = true;
    DepartRef.value.departVisble = true;
    DepartRef.value.selectedMember = [...employeeIds.value];
};
// 获取部门成员
const getDepart = (res: any) => {
    employeeIds.value = res;
    form.employee_ids = getSetionId('id', employeeIds.value);
};
// 员工移除
const handleClose = (tag: any) => {
    employeeIds.value = employeeIds.value.filter((item: any) => item.id !== tag.id);
    form.employee_ids = getSetionId('id', employeeIds.value);
    DepartRef.value.removeItem(tag);
};
// 兜底校验
const Welcome1Ref = ref<any>(null);
const Welcome2Ref = ref<any>(null);
const Welcome3Ref = ref<any>(null);
const PostersRef = ref<any>(null);
const validate = () => {
    return new Promise((resolve, reject) => {
        if (form.employee_ids.length === 0) {
            document.querySelector('#employee_ids')?.scrollIntoView({ behavior: 'smooth' });
            ElMessage.warning('请选择引流员工');
            return;
        }
        //根据后端处理的数据进行处理

        form.welcome_info = Welcome1Ref.value.formData;
        form.assist_success_welcome = Welcome2Ref.value.formData;
        form.assist_fail_welcome = Welcome3Ref.value.formData;
        Object.keys(PostersRef.value.formData).forEach((key: any) => {
            form[key] = PostersRef.value.formData[key];
        });
        form.poster.position = PostersRef.value.getPostersInfo().position;
        //  欢迎语校验
        if (form.part_welcome_switch == 1) {
            if (!form.welcome_info.welcome_text) {
                ElMessage.warning('请填写参与欢迎语');
                document.querySelector('#welcome_info')?.scrollIntoView({ behavior: 'smooth' });
                return;
            }
        }
        if (form.assist_success_welcome_switch == 1) {
            if (!form.assist_success_welcome.welcome_text) {
                ElMessage.warning('请填写助力成功欢迎语');
                document.querySelector('#assist_success_welcome')?.scrollIntoView({ behavior: 'smooth' });
                return;
            }
        }
        if (form.assist_fail_welcome_switch === 1) {
            if (!form.assist_fail_welcome.welcome_text) {
                ElMessage.warning('请填写助力失败欢迎语');
                document.querySelector('#assist_fail_welcome')?.scrollIntoView({ behavior: 'smooth' });
                return;
            }
        }
        if (!form.link_img) {
            ElMessage.warning('请上传图文封面');
            document.querySelector('#link_img')?.scrollIntoView({ behavior: 'smooth' });
            return;
        }
        if (!form.link_title) {
            document.querySelector('#link_title')?.scrollIntoView({ behavior: 'smooth' });
            ElMessage.warning('请输入图文标题');
            return;
        }
        // if (!form.link_desc) {
        //   ElMessage.warning('请填写活动链接描述')
        //   return
        // }
        if (form.poster.poster_type === 1) {
            if (!form.poster.absolute_url) {
                document.querySelector('.posters')?.scrollIntoView({ behavior: 'smooth' });
                ElMessage.warning('请选择海报');
                return;
            }
        } else {
            if (!form.poster.absolute_url) {
                document.querySelector('.posters')?.scrollIntoView({ behavior: 'smooth' });
                ElMessage.warning('请上传海报图片');
                return;
            }
        }

        // 校验描述文案
        if (form.poster.desc_flag === 1 && !form.poster.desc) {
            ElMessage.warning('请输入描述文案');
            return;
        }
        resolve(true);
    });
};
const onLook = (res: any) => {
    getDepart(res.employee_ids);
    form.link_img = res.link_img;
    form.link_title = res.link_title;
    form.link_desc = res.link_desc;

    if (res.poster.poster_type == 1) {
        res.poster.poster_absolute_url = res.poster.absolute_url;
    } else if (res.poster.poster_type == 2) {
        res.poster.local_absolute_url = res.poster.absolute_url;
    }
    PostersRef.value.formData.poster = res.poster;

    PostersRef.value.setPosition(res.poster.position);
    form.part_welcome_switch = res.part_welcome_switch;
    form.assist_success_welcome_switch = res.assist_success_welcome_switch;
    form.assist_fail_welcome_switch = res.assist_fail_welcome_switch;
    // 空数据 []
    if (res.welcome_info instanceof Array) {
        // 未设置数据兜底处理
        Welcome1Ref.value.onLookData({
            welcome_text: form.welcome_info.welcome_text,
            welcome_material: []
        });
    } else {
        Welcome1Ref.value.onLookData(res.welcome_info);
    }
    // 空数据 0
    if (!res.assist_success_welcome) {
        // 未设置数据兜底处理
        Welcome2Ref.value.onLookData({
            welcome_text: form.assist_success_welcome.welcome_text,
            welcome_material: []
        });
    } else {
        Welcome2Ref.value.onLookData(res.assist_success_welcome);
    }
    // 空数据 []
    if (res.assist_fail_welcome instanceof Array) {
        // 未设置数据兜底处理
        Welcome3Ref.value.onLookData({
            welcome_text: form.assist_fail_welcome.welcome_text,
            welcome_material: []
        });
    } else {
        Welcome3Ref.value.onLookData(res.assist_fail_welcome);
    }
};
const onExport = () => {
    return PostersRef.value.onExport();
};

defineExpose({
    form,
    validate,
    onLook,
    initLuckyWheel(rewardInfo: any) {
        PostersRef.value.initLuckyWheel(rewardInfo);
    },
    onExport
});
</script>

<style scoped lang="scss">
.step_four {
    .title {
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 500;
        color: #33302d;

        &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            background: #ff6b00;
            margin-right: 6px;
            vertical-align: top;
        }
    }

    .el-form-item {
        margin-bottom: 10px;
    }

    .divider {
        width: 800px;
        height: 1px;
        background: #e5e5e5;
        margin: 24px 0;
    }

    .link {
        display: flex;
        padding-left: 42px;
        color: #606266;
        font-size: 14px;
    }

    .upload_desc {
        padding-top: 16px;
        font-size: 12px;
        color: #00000078;
        line-height: 14px;
    }

    .activity_form {
        display: flex;
        align-items: center;

        img {
            width: 16px;
            margin-left: 4px;
        }
    }

    .auth_setting {
        margin-left: 20px;
    }

    .effect_time {
        margin-bottom: 24px;
    }

    .form-staffs {
        display: flex;

        .title {
            margin-right: 12px;
        }

        .link_title {
            margin-bottom: 24px;
        }

        .staffs {
            &_item {
                height: 22px;
                line-height: 22px;
                margin-right: 6px;

                // padding: 0;
                color: #35383a;
                border: 1px solid #fffaf9;
                border-radius: 1px;
                background: #fffaf9;
            }

            :deep(.el-tag .el-icon) {
                width: 12px;
                height: 12px;
                color: #fff;
                background: #d9d9d9;
            }

            :deep(.el-tag .el-icon svg) {
                margin: 0;
            }

            :deep(.el-tag .el-tag__close:hover) {
                background: #d9d9d9;
            }

            :deep(span.el-tag.el-tag--light.staffs_item::before) {
                content: '';
                display: inline-block;
                width: 10px;
                height: 11px;
                background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
                margin-right: 10px;
            }
        }
    }
}
</style>
